<template>
  <div>
    <h2>鼠害一览</h2>
    <el-table
      :data="infoList.records"
      border
      style="width: 60%"
      @current-change="handleTableChange"
    >
      <el-table-column prop="mouseName" label="名称"> </el-table-column>
      <el-table-column prop="mouseFood" label="食物"> </el-table-column>
      <el-table-column prop="mouseMainHarm" label="主要危害"> </el-table-column>
    </el-table>
    <br />
    <el-pagination
      background
      layout="prev, pager, next"
      :total="infoList.pages * 10"
      @current-change="getPageNum"
    >
    </el-pagination>
    <br />
    <br />
    <el-row>
      <el-button plain @click="addMouse()">添加新鼠害</el-button>
      <el-button plain @click="getMouseInfo()">查看详细信息</el-button>
    </el-row>

    <fieldset style="width: 28%; border: 1px solid #606266" class="find">
      <legend style="color: #606266">查询鼠害信息</legend>
      <el-form :label-position="labelPosition" label-width="70px">
        <el-form-item label="鼠害名称">
          <el-input v-model="mouseName"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button plain @click="find()">查询</el-button>
      </el-row>
    </fieldset>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoList: [],
      mouseId: "",
      mouseName: "",
      mouseFood: "",
      mouseMainHarm: "",
      labelPosition: "left",
    };
  },
  methods: {
    async cutMouseByItem(pageNo) {
      let paramObj = {
        pageNo: pageNo,
        pageSize: 2,
        mouseName: null,
      };
      let info = await this.ajax.getSubmit("/api/mouse/info", paramObj);
      //console.log(info);
      this.infoList = info;
      //console.log(this.infoList.records);
    },
    getPageNum(val) {
      /*val就是我们点击是对应的页码*/
      //console.log(val)
      this.cutMouseByItem(val);
    },
    handleTableChange(val) {
      //console.log(val);
      this.mouseId = val.mouseId;
    },
    async find() {
      let paramObj = {
        pageNo: 1,
        pageSize: 2,
        mouseName: this.mouseName,
      };
      let info = await this.ajax.getSubmit("/api/mouse/info", paramObj);
      console.log(info);
      this.infoList = info;
      //console.log(this.infoList.records);
    },
    getMouseInfo() {
      //console.log(this.pestId)
      this.$router.push({
        path: "/home/mouseInfo",
        query: { mouseId: this.mouseId },
      });
    },
    addMouse() {
      this.$router.push("/home/addMouse");
    },
  },
  created() {
    this.cutMouseByItem(1);
  },
};
</script>

<style>
</style>